<!DOCTYPE html>
<html lang="zh">
    <head>
    <!--
        © Material Theme
        https://github.com/viosey/hexo-theme-material
        Version: 1.3.4 -->

    <!-- Title -->
    
    <title>
        
            jQuery事件---常见事件的绑定与解除 | 
        
        Twilight&#39;s Blog
    </title>

    <!-- Meta & Info -->
    <meta charset="utf-8">

    <!-- dns prefetch -->
    <meta http-equiv="x-dns-prefetch-control" content="on">
    
    
        <link rel="dns-prefetch" href="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"/>
    
    
        <link rel="dns-prefetch" href="https://changyan.sohu.com"/>
    
    
    
    

    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#0097A7">
    <meta name="author" content="wangchao">
    <meta name="description" content="null">
    <meta name="keywords" content="null,jQuery">

    <!-- Favicons -->
    <link rel="icon shortcut" type="image/ico" href="/img/favicon.png">
    <link rel="icon" sizes="192x192" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">

    <!--iOS -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="Title">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="480">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Twilight&#39;s Blog">

    <!-- The Open Graph protocol -->
    <meta property="og:url" content="http://yoursite.com">
    <meta property="og:type" content="blog">
    <meta property="og:title" content="jQuery事件---常见事件的绑定与解除 | Twilight&#39;s Blog">
    <meta property="og:description" content="null">
    <meta property="og:article:tag" content="jQuery"> 

    <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/ie-blocker.css">

        
            <script src="/js/ie-blocker.zhCN.js"></script>
        
    <![endif]-->

    <!-- Import CSS & jQuery -->
    
        <link rel="stylesheet" href="/css/material.min.css">
        <link rel="stylesheet" href="/css/style.min.css">
        <!-- Config CSS -->


<!-- Other Styles -->
<style>
  body, html {
    font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  a {
    color: #00838F;
  }

  .mdl-card__media,
  #search-label,
  #search-form-label:after,
  #scheme-Paradox .hot_tags-count,
  #scheme-Paradox .sidebar_archives-count,
  #scheme-Paradox .sidebar-colored .sidebar-header,
  #scheme-Paradox .sidebar-colored .sidebar-badge{
    background-color: #0097A7 !important;
  }

  /* Sidebar User Drop Down Menu Text Color */
  #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
  #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
    color: #0097A7 !important;
  }

  #post_entry-right-info,
  .sidebar-colored .sidebar-nav li:hover > a,
  .sidebar-colored .sidebar-nav li:hover > a i,
  .sidebar-colored .sidebar-nav li > a:hover,
  .sidebar-colored .sidebar-nav li > a:hover i,
  .sidebar-colored .sidebar-nav li > a:focus i,
  .sidebar-colored .sidebar-nav > .open > a,
  .sidebar-colored .sidebar-nav > .open > a:hover,
  .sidebar-colored .sidebar-nav > .open > a:focus,
  #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
    color: #0097A7 !important;
  }

  .toTop {
    background: #757575 !important;
  }

  .material-layout .material-post>.material-nav,
  .material-layout .material-index>.material-nav,
  .material-nav a {
    color: #757575;
  }

  #scheme-Paradox .MD-burger-layer {
    background-color: #757575;
  }

  #scheme-Paradox #post-toc-trigger-btn {
    color: #757575;
  }

  .post-toc a:hover {
    color: #00838F;
    text-decoration: underline;
  }

</style>


<!-- Theme Background Related-->

    <style>
      body{
        background-image: url(/img/bg.jpg);
      }
    </style>




<!-- Fade Effect -->

    <style>
      .fade {
        transition: all 800ms linear;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
      }

      .fade.out{
        opacity: 0;
      }
    </style>


        <script src="/js/jquery.min.js"></script>
        <script src="/js/queue.js"></script>
    

    <!-- UC Browser Compatible -->
    <script>
        var agent = navigator.userAgent.toLowerCase();
        if(agent.indexOf('ucbrowser')>0) {
            document.write("<link rel=\"stylesheet\" href=\"/css/uc.css\">");
            alert('由于 UC 浏览器使用极旧的内核，而本网站使用了一些新的特性。\n为了您能更好的浏览，推荐使用 Chrome 或 Firefox 浏览器。');
        }
    </script>

    

    


    <!-- Bing Background -->
    

    <!-- Custom Head -->
    
</head>


    
        <body id="scheme-Paradox" class="lazy">
            <div class="material-layout  mdl-js-layout has-drawer is-upgraded">
                

                <!-- Main Container -->
                <main class="material-layout__content" id="main">

                    <!-- Top Anchor -->
                    <div id="top"></div>

                    
                        <!-- Hamburger Button -->
                        <button class="MD-burger-icon sidebar-toggle">
                            <span class="MD-burger-layer"></span>
                        </button>
                    

                    <!-- Post TOC -->

    
    <!-- Back Button -->
    <!--
    <div class="material-back" id="backhome-div" tabindex="0">
        <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
           href="#" onclick="window.history.back();return false;"
           target="_self"
           role="button"
           data-upgraded=",MaterialButton,MaterialRipple">
            <i class="material-icons" role="presentation">arrow_back</i>
            <span class="mdl-button__ripple-container">
                <span class="mdl-ripple"></span>
            </span>
        </a>
    </div>
    -->

    <!-- Left aligned menu below button -->
    <button id="post-toc-trigger-btn"
        class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">format_list_numbered</i>
    </button>

    <ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn" style="max-height:80vh; overflow-y:scroll;">
        <ol class="post-toc"><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#绑定事件"><span class="post-toc-number">1.</span> <span class="post-toc-text">绑定事件</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#jquery-用-bind-为元素绑定事件"><span class="post-toc-number">2.</span> <span class="post-toc-text">jquery 用 bind() 为元素绑定事件</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#可以一次绑定多个事件"><span class="post-toc-number">2.1.</span> <span class="post-toc-text">可以一次绑定多个事件</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#通过键值对"><span class="post-toc-number">2.2.</span> <span class="post-toc-text">通过键值对</span></a></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#删除事件"><span class="post-toc-number">3.</span> <span class="post-toc-text">删除事件</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#简化的事件函数"><span class="post-toc-number">4.</span> <span class="post-toc-text">简化的事件函数</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#鼠标进入-移出事件"><span class="post-toc-number">5.</span> <span class="post-toc-text">鼠标进入/移出事件</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#键盘事件"><span class="post-toc-number">6.</span> <span class="post-toc-text">键盘事件</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#获得焦点事件"><span class="post-toc-number">7.</span> <span class="post-toc-text">获得焦点事件</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#复合事件"><span class="post-toc-number">8.</span> <span class="post-toc-text">复合事件</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#hover"><span class="post-toc-number">8.1.</span> <span class="post-toc-text">hover()</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#toggle"><span class="post-toc-number">8.2.</span> <span class="post-toc-text">toggle()</span></a></li></ol></li></ol>

        <!--
        <li class="mdl-menu__item">
            Some Action
        </li>
        -->
    </ul>




<!-- Layouts -->

    <!-- Post Module -->
    <div class="material-post_container">

        <div class="material-post mdl-grid">
            <div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">

                <!-- Post Header(Thumbnail & Title) -->
                
    <!-- Paradox Post Header -->
    
        
            <!-- Random Thumbnail -->
            <div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
            <script>
    var randomNum = Math.floor(Math.random() * 19 + 1);

    $('.post_thumbnail-random').attr('data-original', '/img/random/material-' + randomNum + '.png');
    $('.post_thumbnail-random').addClass('lazy');
</script>

        
    
            <p class="article-headline-p">
                jQuery事件---常见事件的绑定与解除
            </p>
        </div>





                
                    <!-- Paradox Post Info -->
                    <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">

    <!-- Author Avatar -->
    <div id="author-avatar">
        <img src="/img/avatar.png" width="44px" height="44px" alt="Author Avatar"/>
    </div>
    <!-- Author Name & Date -->
    <div>
        <strong>wangchao</strong>
        <span>6月 15, 2017</span>
    </div>

    <div class="section-spacer"></div>

    <!-- Favorite -->
    <!--
        <button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
            <i class="material-icons" role="presentation">favorite</i>
            <span class="visuallyhidden">favorites</span>
        </button>
    -->

    <!-- Qrcode -->
    

    <!-- Tags (bookmark) -->
    
    <button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
        <i class="material-icons" role="presentation">bookmark</i>
        <span class="visuallyhidden">bookmark</span>
    </button>
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
        <li class="mdl-menu__item">
        <a class="post_tag-link" href="/tags/jQuery/">jQuery</a>
    </ul>
    

    <!-- Share -->
    <button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
    <i class="material-icons" role="presentation">share</i>
    <span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
    
    <!-- Leancloud Views -->
        <a class="post_share-link" href="#">
            <li class="mdl-menu__item">
                <span id="/2017/06/15/jQuery事件-常见事件的绑定与解除/" class="leancloud-views_num" data-flag-title="jQuery事件---常见事件的绑定与解除">
     &nbsp;浏览量
</span>

            </li>
        </a>
    

    

    <!-- Share Weibo -->
    
        <a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=jQuery事件---常见事件的绑定与解除&url=http://yoursite.com//2017/06/15/jQuery事件-常见事件的绑定与解除/index.html&pic=&searchPic=false&style=simple" target="_blank">
            <li class="mdl-menu__item">
                分享到微博
            </li>
        </a>
    

    <!-- Share Twitter -->
    
        <a class="post_share-link" href="https://twitter.com/intent/tweet?text=jQuery事件---常见事件的绑定与解除&url=http://yoursite.com//2017/06/15/jQuery事件-常见事件的绑定与解除/index.html&via=wangchao" target="_blank">
            <li class="mdl-menu__item">
                分享到 Twitter
            </li>
        </a>
    

    <!-- Share Facebook -->
    
        <a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com//2017/06/15/jQuery事件-常见事件的绑定与解除/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Facebook
            </li>
        </a>
    

    <!-- Share Google+ -->
    
        <a class="post_share-link" href="https://plus.google.com/share?url=http://yoursite.com//2017/06/15/jQuery事件-常见事件的绑定与解除/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Google+
            </li>
        </a>
    

    <!-- Share LinkedIn -->
    

    <!-- Share QQ -->
    
        <a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=Twilight&#39;s Blog&title=jQuery事件---常见事件的绑定与解除&summary=null&pics=http://yoursite.com/img/favicon.png&url=http://yoursite.com/2017/06/15/jQuery事件-常见事件的绑定与解除/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 QQ
            </li>
        </a>
    

    <!-- Share Telegram -->
    
</ul>

</div>

                

                <!-- Post Content -->
                <div id="post-content" class="mdl-color-text--grey-700 mdl-card__supporting-text fade out">
    
        <h1 id="绑定事件"><a href="#绑定事件" class="headerlink" title="绑定事件"></a>绑定事件</h1><p>常见事件有：click dbclick mousedown mouseup mousemove mouseover mouseout change select submit keydown keypress keyup blur focus load resize scroll error… </p>
<h1 id="jquery-用-bind-为元素绑定事件"><a href="#jquery-用-bind-为元素绑定事件" class="headerlink" title="jquery 用 bind() 为元素绑定事件"></a>jquery 用 bind() 为元素绑定事件</h1><p>bind(type,[data],function)</p>
<ul>
<li>type 表示事件类型，是事件名称的字符串</li>
<li>data 是<strong>可选</strong>的作为event.data 属性传递一个额外的数据</li>
<li>fn 表示绑定到指定元素的处理函数<a id="more"></a>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$(function()&#123;</div><div class="line">	$(&quot;input&quot;).bind(&quot;click&quot;,test);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>将元素与指定函数绑定<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">$(function()&#123;</div><div class="line">	$(&quot;input&quot;).bind(&quot;click&quot;,test);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">function test()&#123;</div><div class="line">	alert(&quot;#&quot;);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h2 id="可以一次绑定多个事件"><a href="#可以一次绑定多个事件" class="headerlink" title="可以一次绑定多个事件"></a>可以一次绑定多个事件</h2><ul>
<li>bind(‘evevt1 event2 ‘，function()) 绑定多个事件</li>
</ul>
<p>同时绑定鼠标移入和移出事件<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">$(function()&#123;</div><div class="line">	$(&quot;input&quot;).bind(&quot;mouseover mouseout&quot;,function()&#123;</div><div class="line">		$(&quot;div&quot;).html(function(index,value)&#123;</div><div class="line">			return (value+index);</div><div class="line">		&#125;);</div><div class="line">	&#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<h2 id="通过键值对"><a href="#通过键值对" class="headerlink" title="通过键值对"></a>通过键值对</h2><p>双引号可加可不加<br><em>bind({<br>    event1:function(){},<br>    event2:function(){}<br>})</em></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">$(function()&#123;</div><div class="line">	$(&quot;input&quot;).bind(&#123;</div><div class="line">		mouseover:function()&#123;</div><div class="line">			alert(&quot;移入&quot;);</div><div class="line">		&#125;,</div><div class="line">		mouseout:function()&#123;</div><div class="line">			alert(&quot;移出&quot;);</div><div class="line">		&#125;</div><div class="line">	&#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h1 id="删除事件"><a href="#删除事件" class="headerlink" title="删除事件"></a>删除事件</h1><ul>
<li>unbind() 删除当前元素所有的事件</li>
<li>unlind(‘事件’) 删除指定事件</li>
<li>unbind(‘事件’,fn) 删除事件绑定的特定函数</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">$(function()&#123;</div><div class="line">	$(&quot;input&quot;).bind(&#123;</div><div class="line">		mouseover:function()&#123;</div><div class="line">			alert(&quot;移入&quot;);</div><div class="line">		&#125;,</div><div class="line">		mouseout:function()&#123;</div><div class="line">			alert(&quot;移出&quot;);</div><div class="line">		&#125;</div><div class="line">	&#125;);</div><div class="line">	</div><div class="line">	$(&quot;input&quot;).unbind(&quot;mouseover&quot;);		// 移除mouseover事件</div><div class="line">	$(&quot;input&quot;).unbind();				// 移除改元素的所有事件</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>移出元素上绑定的指定函数<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">$(function()&#123;</div><div class="line">	$(&quot;input&quot;).bind(&quot;mouseover&quot;,test);		</div><div class="line">	$(&quot;input&quot;).unbind(&quot;mouseover&quot;,test);</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<h1 id="简化的事件函数"><a href="#简化的事件函数" class="headerlink" title="简化的事件函数"></a>简化的事件函数</h1><ul>
<li>click(fn) 鼠标click(单击)事件</li>
<li>dblclick(fn) 鼠标dblclick(双击)事件</li>
<li>mousedown(fn) 鼠标mousedown(点击后)事件</li>
<li>mouseup(fn) 鼠标mouseup(点击弹起)事件</li>
<li>mouseover(fn) 鼠标mouseover(鼠标移入)事件</li>
<li>mouseout(fn) 鼠标mouseout(鼠标移出)事件</li>
<li>mousemove(fn) 鼠标mousemove(鼠标移动)事件</li>
<li>mouseenter(fn) 鼠标mouseenter(鼠标穿过)事件</li>
<li>mouseleave(fn) 鼠标mouseleave(鼠标穿出)事件</li>
<li>keydown(fn) 键盘keydown(键盘按下)事件</li>
<li>keyup(fn) 键盘keyup(键盘按下弹起)事件</li>
<li>keypress(fn) 键盘keypress(键盘按下)事件</li>
<li>unload(fn) 文档 当卸载本页面时绑定一个要执行的函数</li>
<li>resize(fn) 文档resize(文档改变大小)事件</li>
<li>scroll(fn) 文档scroll(滚动条拖动)事件</li>
<li>focus(fn) 表单 focus(焦点激活)事件</li>
<li>blur(fn) 表单blur(焦点丢失)事件</li>
<li>focusin(fn) 表单 触发每一个匹配元素的 focusin(焦点激活)事件</li>
<li>focusout(fn) 表单 触发每一个匹配元素的 focusout(焦点丢失)事件</li>
<li>select(fn) <strong>表单</strong>select(文本选定)事件</li>
<li>change(fn) <strong>表单</strong>change(值改变)事件</li>
<li>submit(fn) 表单submit(表单提交)事件</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">// 单击事件</div><div class="line">	$(&quot;input&quot;).click(function()&#123;</div><div class="line">		alert(&quot;#&quot;);</div><div class="line">	&#125;);</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">// 双击事件</div><div class="line">	function dbtest()&#123;</div><div class="line">		alert(&quot;双击&quot;);</div><div class="line">	&#125;</div><div class="line">	</div><div class="line">	$(&quot;input&quot;).dblclick(dbtest);</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">// 鼠标按下弹起事件</div><div class="line">	$(&quot;input&quot;).mousedown(function()&#123;</div><div class="line">		alert(&quot;down&quot;);</div><div class="line">	&#125;);</div><div class="line">	$(&quot;input&quot;).mouseup(function()&#123;</div><div class="line">		alert(&quot;up&quot;)</div><div class="line">	&#125;);</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">// 浏览器窗口改变大小时触发</div><div class="line">	$(window).resize(function()&#123;</div><div class="line">		alert(&quot;resize&quot;);</div><div class="line">	&#125;);</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">// 滚动条事件</div><div class="line">	$(document).scroll(function()&#123;</div><div class="line">		alert(&quot;scroll&quot;);</div><div class="line">	&#125;);</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">// b表单文本被选中事件</div><div class="line">	$(&quot;textarea&quot;).select(function()&#123;</div><div class="line">		alert(&quot;文本被选中&quot;);</div><div class="line">	&#125;);</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">// 表单文本被更改事件</div><div class="line">	$(&quot;textarea&quot;).change(function()&#123;</div><div class="line">		alert(&quot;文本被更改&quot;);</div><div class="line">	&#125;);</div></pre></td></tr></table></figure>
<h1 id="鼠标进入-移出事件"><a href="#鼠标进入-移出事件" class="headerlink" title="鼠标进入/移出事件"></a>鼠标进入/移出事件</h1><ul>
<li>mouseover/mouseout  鼠标移入移出（<strong>穿过子元素会触发</strong>）</li>
<li>mouseenter/mouseleave 鼠标穿入/穿出(<strong>穿过子元素不会触发</strong>)</li>
</ul>
<p><img src="http://i2.muimg.com/584041/44e900625395455c.png" alt="鼠标事件"></p>
<p>给大div绑定鼠标移入和移出事件，当鼠标进入绿色div时，会输出两个0.因为移入绿色div时同时发生了移出大div和移入小div，会触发两次事件。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">$(&quot;div&quot;).eq(0).mouseover(function()&#123;</div><div class="line">	$(&quot;.p&quot;).eq(0).html(function (index,value)&#123;</div><div class="line">		return value + index ;</div><div class="line">	&#125;);</div><div class="line">&#125;);</div><div class="line"></div><div class="line">$(&quot;div&quot;).eq(0).mouseout(function()&#123;</div><div class="line">	$(&quot;.p&quot;).eq(0).html(function (index,value)&#123;</div><div class="line">		return value + index ;</div><div class="line">	&#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<h1 id="键盘事件"><a href="#键盘事件" class="headerlink" title="键盘事件"></a>键盘事件</h1><p>keydown/keyup 和 heypress</p>
<ul>
<li>keydown/keyup 返回键码keyCode</li>
<li>keypress 返回字符编码 charCode<br>如果类型错误会返回0</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$(window).keyup(function()&#123;alert(event.keyCode);&#125;);</div><div class="line">$(window).keypress(function()&#123;alert(event.charCode);&#125;);</div></pre></td></tr></table></figure>
<h1 id="获得焦点事件"><a href="#获得焦点事件" class="headerlink" title="获得焦点事件"></a>获得焦点事件</h1><ul>
<li>focus() / flur()  光标激活和丢失（当前元素，不包含子元素）</li>
<li>focusin() / focusout() 光标激活和丢失（包含子元素）</li>
<li><strong>PS: </strong><br><strong>1. 只用于表单</strong><br><strong>2. 点击控件时才会转移焦点</strong><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">$(&quot;.div&quot;).focusin(function()&#123;</div><div class="line">	$(&quot;.p&quot;).html(function(index,value)&#123;</div><div class="line">		return value+&quot;1&quot;;</div><div class="line">	&#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
</li>
</ul>
<h1 id="复合事件"><a href="#复合事件" class="headerlink" title="复合事件"></a>复合事件</h1><ul>
<li>ready(function) 当DOM加载完毕时触发</li>
<li><strong>hover（fn1,fn2） 移入和移出时在fn1 和fn2 之间切换</strong>（mouseenter和mouseleaver的结合）</li>
<li>toggle(fn1,fn2,fn3)已弃用。在多个样式之间切换</li>
</ul>
<h2 id="hover"><a href="#hover" class="headerlink" title="hover()"></a>hover()</h2><p>移入和移出时改变颜色：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">$(&quot;div&quot;).hover(function()&#123;</div><div class="line">	$(this).css(&quot;background-color&quot;,&quot;red&quot;);</div><div class="line">&#125;,function()&#123;</div><div class="line">	$(this).css(&quot;background-color&quot;,&quot;blue&quot;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<h2 id="toggle"><a href="#toggle" class="headerlink" title="toggle()"></a>toggle()</h2><p>自己完成toggle() ，每次点击切换一个样式<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">var count = 0 ; </div><div class="line">$(&quot;.div&quot;).click(function()&#123;</div><div class="line">	if(count == 0 )&#123;</div><div class="line">		$(this).css(&quot;background-color&quot;,&quot;red&quot;);</div><div class="line">		count ++ ;</div><div class="line">	&#125;</div><div class="line">	else if (count == 1 )&#123;</div><div class="line">		$(this).css(&quot;background-color&quot;,&quot;green&quot;);</div><div class="line">		count ++ ;</div><div class="line">	&#125;</div><div class="line">	else if (count == 2)&#123;</div><div class="line">		$(this).css(&quot;background-color&quot;,&quot;yellow&quot;);</div><div class="line">		count=0 ;</div><div class="line">	&#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p><strong>PS : div默认是不能选中的，使用鼠标点击无法获得焦点，如果需要获得焦点可以加上tabindex=”1”属性</strong><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;div class=&quot;div&quot; style=&quot;width:200px;height:200px; background-color:yellow;&quot; tabindex=&quot;1&quot;&gt;</div><div class="line">	&lt;input type=&quot;text&quot; class=&quot;input&quot;/&gt;</div><div class="line">&lt;/div&gt;</div></pre></td></tr></table></figure></p>

    

    
</div>


                

                <!-- Post Comments -->
                
                    


    <!-- 使用 changyan -->
    <div id="changyan-comment">
        <!--PC和WAP自适应版-->
<div id="SOHUCS" sid="2017/06/15/jQuery事件-常见事件的绑定与解除/"  ></div>
<script type="text/javascript">
(function(){
var appid = 'cysVH2p6S';
var conf = '7d191ef850d424bb873df33179309db5';
var width = window.innerWidth || document.documentElement.clientWidth;
if (width < 960) {
window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>

    </div>
    <style>
        #changyan-comment{
            background-color: #eee;
            padding: 2pc;
        }
    </style>






                
            </div>

            <!-- Post Prev & Next Nav -->
            <nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
    <!-- Prev Nav -->
    
        <a href="/2017/06/15/jQuery事件对象-常见属性/" id="post_nav-newer" class="prev-content">
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_back</i>
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            新篇
        </a>
    

    <!-- Section Spacer -->
    <div class="section-spacer"></div>

    <!-- Next Nav -->
    
        <a href="/2017/06/15/查找和关闭占用特定端口的进程/" id="post_nav-older" class="next-content">
            旧篇
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_forward</i>
            </button>
        </a>
    
</nav>

        </div>
    </div>



                    
                        <!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay"></div>

<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
    <div id="sidebar-main">
        <!-- Sidebar Header -->
        <div class="sidebar-header header-cover" style="background-image: url(/img/sidebar_header.jpg);">
    <!-- Top bar -->
    <div class="top-bar"></div>

    <!-- Sidebar toggle button -->
    <button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
        <i class="material-icons">clear_all</i>
        <span class="mdl-button__ripple-container">
            <span class="mdl-ripple">
            </span>
        </span>
    </button>

    <!-- Sidebar Avatar -->
    <div class="sidebar-image">
        <img src="/img/avatar.png" alt="wangchao's avatar">
    </div>

    <!-- Sidebar Email -->
    <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
        twilight0402@163.com
        <b class="caret"></b>
    </a>
</div>


        <!-- Sidebar Navigation  -->
        <ul class="nav sidebar-nav">
    <!-- User dropdown  -->
    <li class="dropdown">
        <ul id="settings-dropdown" class="dropdown-menu">
            
                <li>
                    <a href="http://mail.163.com" target="_blank" title="Email Me">
                        
                            <i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
                        
                        Email Me
                    </a>
                </li>
            
        </ul>
    </li>

    <!-- Homepage -->
    
        <li id="sidebar-first-li">
            <a href="/" target="_self">
                
                    <i class="material-icons sidebar-material-icons">home</i>
                
                主页
            </a>
        </li>
        
    

    <!-- Archives  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                
                    <i class="material-icons sidebar-material-icons">inbox</i>
                
                    归档
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
            <li>
                <a class="sidebar_archives-link" href="/archives/2017/08/">八月 2017<span class="sidebar_archives-count">5</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/07/">七月 2017<span class="sidebar_archives-count">23</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/06/">六月 2017<span class="sidebar_archives-count">13</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/04/">四月 2017<span class="sidebar_archives-count">7</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/03/">三月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/02/">二月 2017<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/01/">一月 2017<span class="sidebar_archives-count">8</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/12/">十二月 2016<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/11/">十一月 2016<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/09/">九月 2016<span class="sidebar_archives-count">3</span></a>
            </ul>
        </li>
        
    

    <!-- Categories  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                
                    <i class="material-icons sidebar-material-icons">chrome_reader_mode</i>
                
                分类
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li>
                <a class="sidebar_archives-link" href="/categories/CSS/">CSS<span class="sidebar_archives-count">9</span></a></li><li><a class="sidebar_archives-link" href="/categories/HTML/">HTML<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/categories/JSP/">JSP<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/categories/Java/">Java<span class="sidebar_archives-count">8</span></a></li><li><a class="sidebar_archives-link" href="/categories/JavaScript/">JavaScript<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/Linux/">Linux<span class="sidebar_archives-count">13</span></a></li><li><a class="sidebar_archives-link" href="/categories/MySQL/">MySQL<span class="sidebar_archives-count">7</span></a></li><li><a class="sidebar_archives-link" href="/categories/Servlet/">Servlet<span class="sidebar_archives-count">9</span></a></li><li><a class="sidebar_archives-link" href="/categories/jQuery/">jQuery<span class="sidebar_archives-count">7</span></a></li><li><a class="sidebar_archives-link" href="/categories/技术/">技术<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/日常/">日常<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/随笔/">随笔<span class="sidebar_archives-count">3</span></a>
            </ul>
        </li>
        
    

    <!-- Pages  -->
    
        <li>
            <a href="/tags" title="标签云">
                
                    <i class="material-icons sidebar-material-icons">cloud</i>
                
                标签云
            </a>
        </li>
        
            <li class="divider"></li>
        
    
        <li>
            <a href="/about" title="About">
                
                    <i class="material-icons sidebar-material-icons">person</i>
                
                About
            </a>
        </li>
        
    
        <li>
            <a href="/links" title="Social">
                
                    <i class="material-icons sidebar-material-icons">equalizer</i>
                
                Social
            </a>
        </li>
        
    

    <!-- Article Number  -->
    
        <li>
            <a href="/archives">
                文章总数
                <span class="sidebar-badge">71</span>
            </a>
        </li>
        
    
</ul>


        <!-- Sidebar Footer -->
        <!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)

很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->

<!-- Sidebar Divider -->

    <div class="sidebar-divider"></div>


<!-- Theme Material -->


<!-- Help & Support -->
<!--

-->

<!-- Feedback -->
<!--

    <a href="https://github.com/viosey/hexo-theme-material/issues" target="_blank" class="sidebar-footer-text-a">
        <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
        sidebar.feedback
        <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></div>
    </a>

-->

<!-- About Theme -->
<!--

    <a href="https://blog.viosey.com/index.php/Material.html" target="_blank" class="sidebar-footer-text-a">
        <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
             sidebar.about_theme
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></div>
    </a>

-->

    </div>

    <!-- Sidebar Image -->
    

</aside>

                    

                    
                        <!-- Footer Top Button -->
                        <div class="toTop-wrap">
    <a href="#top" class="toTop">
        <i class="material-icons footer_top-i">expand_less</i>
    </a>
</div>

                    

                    <!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
    
        <!-- Paradox Footer Left Section -->
        <div class="mdl-mini-footer--left-section sns-list">
    <!-- Twitter -->
    
        <a href="https://twitter.com/twitter" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-twitter.svg);">
                <span class="visuallyhidden">Twitter</span>
            </button><!--
     --></a>
    

    <!-- Facebook -->
    
        <a href="https://www.facebook.com/facebook" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-facebook.svg);">
                <span class="visuallyhidden">Facebook</span>
            </button><!--
     --></a>
    

    <!-- Google + -->
    
        <a href="https://www.google.com/" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-gplus.svg);">
                <span class="visuallyhidden">Google Plus</span>
            </button><!--
     --></a>
    

    <!-- Weibo -->
    

    <!-- Instagram -->
    

    <!-- Tumblr -->
    

    <!-- Github -->
    
        <a href="https://github.com/1601436878" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-github.svg);">
                <span class="visuallyhidden">Github</span>
            </button><!--
     --></a>
    

    <!-- LinkedIn -->
    

    <!-- Zhihu -->
    
        <a href="https://www.zhihu.com/people/wang-chao-50-78/activities" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-zhihu.svg);">
                <span class="visuallyhidden">Zhihu</span>
            </button><!--
     --></a>
    

    <!-- Bilibili -->
    

    <!-- Telegram -->
    
</div>


        <!--Copyright-->
        <div id="copyright">
            Copyright&nbsp;©&nbsp;
            <script type="text/javascript">
                var fd = new Date();
                document.write(fd.getFullYear());
            </script>
            &nbsp;Twilight's Blog
        </div>

        <!-- Paradox Footer Right Section -->

        <!--
        I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
        It will not impact the appearance and can give developers a lot of support :)

        很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
        它不会影响美观并可以给开发者很大的支持。 :)
        -->

        <div class="mdl-mini-footer--right-section">
            <div>
                <div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
                <div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
            </div>
        </div>
    
</footer>


                    <!-- Import File -->

    <script src="/js/lazyload.min.js"></script>
    <script src="/js/js.min.js"></script>



    <script src="/js/nprogress.js"></script>


<script type="text/javascript">
    NProgress.configure({
        showSpinner: true
    });
    NProgress.start();
    $('#nprogress .bar').css({
        'background': '#29d'
    });
    $('#nprogress .peg').css({
        'box-shadow': '0 0 10px #29d, 0 0 15px #29d'
    });
    $('#nprogress .spinner-icon').css({
        'border-top-color': '#29d',
        'border-left-color': '#29d'
    });
    setTimeout(function() {
        NProgress.done();
        $('.fade').removeClass('out');
    }, 800);
</script>





    <!-- Leancloud -->
    <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
    <script>
        AV.initialize('WJXlEXdVypRaytiRUYDL9Q4w-gzGzoHsz', 'qNN24AGgbaMqnDE7lqK8pwCD');
    </script>
    <script>
    function showTime(Counter) {
        var query = new AV.Query(Counter);
        $('.leancloud-views_num').each(function() {
            var url = $(this).attr('id').trim();
            query.equalTo('url', url);
            query.find({
                success: function(results) {
                    if (results.length === 0) {
                        var content = '0 ' + $(document.getElementById(url)).text();
                        $(document.getElementById(url)).text(content);
                        return;
                    }
                    for (var i = 0; i < results.length; i++) {
                        var object = results[i];
                        var content = object.get('time') + ' ' + $(document.getElementById(url)).text();
                        $(document.getElementById(url)).text(content);
                    }
                },
                error: function(object, error) {
                    console.log('Error: ' + error.code + ' ' + error.message);
                }
            });
        });
    }

    function addCount(Counter) {
      var Counter = AV.Object.extend('Counter');
      url = $('.leancloud-views_num').attr('id').trim();
      title = $('.leancloud-views_num').attr('data-flag-title').trim();
      var query = new AV.Query(Counter);
      query.equalTo('url', url);
      query.find({
          success: function(results) {
            if (results.length > 0) {
                var counter = results[0];
                counter.fetchWhenSave(true);
                counter.increment('time');
                counter.save(null, {
                    success: function(counter) {
                        var content =  counter.get('time') + ' ' + $(document.getElementById(url)).text();
                        $(document.getElementById(url)).text(content);
                    },
                    error: function(counter, error) {
                        console.log('Failed to save Visitor num, with error message: ' + error.message);
                    }
                });
            } else {
              var newcounter = new Counter();
              newcounter.set('title', title);
              newcounter.set('url', url);
              newcounter.set('time', 1);
              newcounter.save(null, {
                  success: function(newcounter) {
                      console.log('newcounter.get(\'time\')='+newcounter.get('time'));
                      var content = newcounter.get('time') + ' ' + $(document.getElementById(url)).text();
                      $(document.getElementById(url)).text(content);
                  },
                  error: function(newcounter, error) {
                      console.log('Failed to create');
                  }
              });
            }
        },
        error: function(error) {
            console.log('Error:' + error.code + ' ' + error.message);
        }
      });
    }
    $(function() {
        var Counter = AV.Object.extend('Counter');
        if ($('.leancloud-views_num').length === 1) {
            addCount(Counter);
        } else if ($('.post-title-link').length > 1) {
            showTime(Counter);
        }
    });
</script>







    <!-- 畅言公共 js 代码 start -->
		<script id="cy_cmt_num" src="https://changyan.sohu.com/upload/plugins/plugins.list.count.js?clientId=cysVH2p6S">
</script>
    <!-- 畅言公共 js 代码 end -->







<!-- Window Load-->
<script>
    $(window).load(function() {
        // Post_Toc parent position fixed
        $('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
    });
</script>

<!-- MathJax Load-->

<script>
    <!-- Offer LazyLoad -->
    queue.offer(function(){
        $('.lazy').lazyload({
            effect : 'show'
        });
    });

    <!-- Start Queue -->
    $(document).ready(function(){
        setInterval(function(){
            queue.execNext();
        },200);
    });
</script>

                </main>
            </div>
			<!--  -->
				<!--<script type="text/javascript" count="200" color="0,0,255" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>-->
			<!--  -->
        </body>
    
</html>
